<template>
  <view class="avatar" :style="{
    width: width + 'rpx',
    height: height + 'rpx',
    borderColor: borderColor || '',
    borderWidth: borderWidth || '',
  }">
    <image :src="src" mode="aspectFill" />
    <view class="avatar_sex" :style="{
      width: sexIconWidth + 'rpx',
      height: sexIconWidth + 'rpx',
    }">
      <image :src="sexIcon" mode="" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    src: String,
    width: {
      type: Number || String,
      default: 88,
    },
    height: {
      type: Number || String,
      default: 88,
    },
    sexIcon: {
      type: String,
      default: "",
    },
    sexIconWidth: {
      type: Number || String,
      default: 24,
    }
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  &_sex {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24rpx;
    height: 24rpx;
  }
}
</style>